<!--
详见： https://blog.csdn.net/qq_41463655/article/details/124768421
 -->

<template>
    <div id="vue-tinymce">
        <vue-tinymce
            output-format="html"
            v-model="editorValue"
            :setting="setting"/>
    </div>
</template>

<script>

import {Message} from 'element-ui'
export default {
    name: 'vueTinymceEditor',
    data() {
        return {
            editorValue: this.content != null ? this.content : "",
            setting: {
                menubar: true,  // 菜单栏
                //inline: true,   //开启内联模式
                readonly: false, // 只读
                toolbar:
                    "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table emoticons | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | wordcount code",
                toolbar_drawer: "sliding",
                quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                plugins: "link image media table lists fullscreen quickbars wordcount paste emoticons code",
                language: 'zh_CN',
                height: 350,
                // 图片上传地址(自动上传)
                // images_upload_url: uploadPath + 'image/vueTinymce/',
                // 允许粘贴图片上传,及格式
                paste_data_images: true,
                images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
                // 此处为图片上传处理函数 (手动上传)
                images_upload_handler: (blobInfo, success, failure, progress) => {
                    console.debug('上传处理器');
                    // const formData = new FormData()
                    // formData.append('file', blobInfo.blob(), blobInfo.filename());
                    let file = new window.File([blobInfo.blob()], blobInfo.filename());
                    this.crud.upload(file, "image/vueTinymce/").then(res => {
                        // 获取返回数据
                        let data = res.data.data;
                        // 添加图片到内容
                        success(data.url, data.name)
                    });
                },
                file_picker_callback: function (callback, value, meta) {
                    // Provide file and text for the link dialog
                    if (meta.filetype == 'file') {
                        callback('mypage.html', {text: 'My text'});
                    }
                    // Provide image and alt text for the image dialog
                    if (meta.filetype == 'image') {
                        callback('myimage.jpg', {alt: 'My alt text'});
                    }
                    // Provide alternative source and posted for the media dialog
                    if (meta.filetype == 'media') {
                        callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
                    }
                },
            }
        }
    },
    props: {
        // 接收值父组件传递值
        content: String
    }
    ,
    created() {
        console.debug("--------加载 vue-tinymce 富文本编辑器")
    },
    watch: {
        editorValue: function (newNum, oldNum) {
            // 修改调用者传入的值
            this.$emit('update:content', newNum)
        }
    }
}
</script>

<style>
/* 富文本按钮功能优先级,最好 > 2500  弹出默认2000+ */
.tox-tinymce-aux {
    z-index: 9999 !important;
}


</style>